import { Descriptions,Button} from "antd";
import GlobalContext from "../../../../../../../../utils/GlobalContext";
import {Card} from "antd";
import { CloseOutlined } from "@ant-design/icons";
import DarkCard from "../../../../../../../common/DarkCard";
import { useState } from "react";



export default function KspgDetail(props){
    const {item}=props;
    const [open,setOpen]=useState(true)
  
    
    console.log(item);
    return (
       open && <DarkCard style={{
            position: 'absolute',
            right: '10px',
            width: '300px',
            top: '20px',
            bottom: '20px',
            pointerEvents: 'auto',
            borderRadius: 8,
        }} className="layout-v">
            <div style={{
                fontSize: 20,
                fontWeight: "bold",
                borderBottom: "1px solid #eee",
                paddingBottom: 12,
                marginBottom: 12
            }} className='layout-h center'>
                <div className='fill w0'>详情</div>
                <div>
                    <Button size="small" icon={<CloseOutlined />} style={{
                        // color: "#fff"
                    }} onClick={e=>setOpen(false)} />
                </div>
            </div>
            <Descriptions column={1} bordered size='large' className="fill h0" style={{
            overflow:'auto'
        }}>
            {
                Object.entries(item).map(([key,value])=>{
                    return (
                    <Descriptions.Item label={key}>{value}</Descriptions.Item>
                    )
                })
            }
        </Descriptions>
            </DarkCard>
        
       
           
        
    )

}